<!-- 赠送明细 -->
<template>
	<view class="container">
		<view class="date">
			<view @click="datePickerShow">
				<text>{{data.user_time}}</text>
				<text class="cell-more yticon icon-xia"></text>
			</view>
		</view>
		<view class="listBox">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view>
					<text>{{item.title}}</text>
					<text>{{item.em}}{{item.number}}</text>
				</view>
				<view>
					<text>{{item.add_time}}</text>
					<text>剩余 {{item.balance}}</text>
				</view>
			</view>
		</view>
		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		<w-picker mode="date" value="2020-04" :current="true" fields="month" @confirm="onConfirm($event)" @cancel="onCancel"
		 :disabled-after="true" ref="date"></w-picker>
	</view>
</template>

<script>
	import {
		userBill
	} from "@/api/user.js"
	import wPicker from "@/components/w-picker/w-picker.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	export default {
		components: {
			wPicker,
			uniLoadMore
		},
		data() {
			return {
				list: [],
				data: {
					type: 4,
					category: "shell",
					page: 1,
					limit: 15,
					user_time: "",
				},
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				}
			}
		},
		onLoad(options) {
			let myDate = new Date();
			let year = myDate.getFullYear()
			let month = myDate.getMonth() + 1
			if (month < 10) {
				month = '0' + month
			}
			this.data.user_time = year + '-' + month
			this.getList()
		},
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.getList();
		},
		methods: {
			getList() {
				userBill(this.data).then(res => {
					this.loadStatus = "more";
					this.list.push.apply(this.list, res.data);
					if (res.data.length < this.data.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.data.page = this.data.page + 1;
					if (this.list.length == 0) {
						this.nodata = true
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.nodata = false
					}
				})
			},
			onConfirm(e) {
				this.loadStatus = "loading";
				this.list = []
				this.data.page = 1
				this.data.user_time = e.value
				this.getList()
			},
			datePickerShow() {
				this.$refs.date.show()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;

		.date {
			position: sticky;
			top: 0;
			height: 60rpx;
			width: 690rpx;
			padding: 35rpx 30rpx;
			margin-left: -30rpx;
			background-color: #f5f5f5;

			view {
				width: 180rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 30rpx;
				display: flex;
				justify-content: center;

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					line-height: 60rpx;
				}
			}
		}

		.listBox {
			.item {
				height: 142rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-bottom: 1rpx solid #f5f5f5;

				view {
					display: flex;
					justify-content: space-between;
				}

				view:nth-of-type(1) {
					margin-bottom: 10rpx;

					text {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}
				}

				view:nth-of-type(2) {
					text {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
					}
				}
			}

			.item:nth-of-type(1) {
				border-top: 1rpx solid #f5f5f5;
			}
		}
	}
</style>
